<template>
    <div>
        <el-row>
          <el-col :span="12" >
               <div id="pie" style="width: 500px; height: 500px; margin-left:70px; margin-top:60px"></div>
           </el-col>
           <el-col :span="12" >
               <div id="main" style="width: 500px; height: 500px; margin-left:50px; margin-top:40px"></div>
           </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
name: 'Home',

data() {
  return {
    
  };
},
mounted(){
    var option = {
      title:{
        text: '各季度员工入职人数统计',
        // subtext: '趋势图',
        left: 'center',
        textStyle : {
            fontWeight : 600 ,
            fontSize : 29,    //文字的字体大小
            // color: "#fff"
          },
      },
      xAxis: {
        type: 'category',
        data: ["第一季度","第二季度","第三季度","第四季度"]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [],
          type: 'line'
        },
        {
          data: [],
          type: 'bar'
        }
      ]};

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    
    this.request.get("/echarts/members").then(res =>{
        // option.xAxis.data = res.data.x
        option.series[0].data = res.data
        option.series[1].data = res.data
        myChart.setOption(option);
    })

    var pieOption = {
    title: {
    text: '鲜花销量top5',
    // subtext: '比例图',
    left: 'center',
    textStyle : {
            fontWeight : 600 ,
            fontSize : 29,    //文字的字体大小
            // color: "#fff"
          },
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      type: 'pie',
      radius: '60%',
      label:{            //饼图图形上的文本标签
        normal:{
          show:true,
          position:'inner', //标签的位置
          textStyle : {
            fontWeight : 500 ,
            fontSize : 19,    //文字的字体大小
            color: "#fff"
          },
          formatter:'{d}%'
        }
      },
      data: [
        { value: 1048, name: 'xigua'},
        // { value: 735, name: 'caomei'},
        // { value: 580, name: 'xiangjiao'},
        // { value: 484, name: 'pingguo'},
        // { value: 300, name: 'taozi'},
      ],  // 填空
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
var pieDom = document.getElementById('pie');
var pieChart = echarts.init(pieDom);
    this.request.get("/echarts/flowerTop").then(res =>{
      console.log('西瓜',res);
            // option.xAxis.data = res.data.x
            // option.series[0].data = res.data
            // option.series[1].data = res.data
            // myChart.setOption(option);
            pieOption.series[0].data = [
              {value: res.data[0].sales, name: res.data[0].name},
              {value: res.data[1].sales, name: res.data[1].name},
              {value: res.data[2].sales, name: res.data[2].name},
              {value: res.data[3].sales, name: res.data[3].name},
              {value: res.data[4].sales, name: res.data[4].name},
            ] 
            console.log('草莓',pieOption.series.data);
            pieChart.setOption(pieOption);
        })
}
};
</script>

<style>
</style>